<style rel="stylesheet/scss" lang="scss" scoped>
	.f-cation {
		flex: 1;
		display: flex;
		height: 700px;
		margin: 0 5px;
		padding: 0 5px 0;
		border: 1px solid #e5e5e5;
		flex-direction: column;
		margin-top: 10px;
		min-width: 250px;
		.f-cation_btn {
			width: 100%;
			height: 40px;
			color: #fff;
			display: flex;
			line-height: 40px;
			padding-left: 10px;
			cursor: pointer;
			background: #409EFF;
			span {
				flex: 1;
				text-align: center;
			}
		}
		.f-cation_info {
			width: 100%;
			flex: 1;
			flex-direction: column;
			overflow: auto;
			display: block;
			-webkit-padding-start: 0px;
			.info-item {
				width: 100%;
				height: 40px;
				display: flex;
				line-height: 40px;
				border-bottom: 1px solid #e5e5e5;
				cursor: pointer;
				.info-item_div {
					flex: 1;
					display: flex;
					justify-content: flex-end;
					align-items: flex-end;
					>span {
						cursor: pointer;
					}
					.text-s {
						color: #409EFF;
						margin: 0 10px;
					}
				}
				i {
					margin-top: 10px;
					margin-right: 5px;
				}
			}
			.current {
				background: #f0f0f0;
			}
		}
	}
</style>
<template>
	<div class="f-cation">
		<p class="f-cation_btn">
			<font @click="addCartFn">新增+</font>
			<span>一级分类</span>
		</p>
		<el-input placeholder="请输入内容" prefix-icon="el-icon-search" clearable v-model="keyWord"></el-input>
		<ul class="f-cation_info" v-if="list && list.length>0">
			<li class="info-item" v-for="(item, index) in list" :class="{'current': currentIndex == index}" @click="selectItem(item, index)">
				<span>{{item.catName}}</span>
				<div class="info-item_div">
					<span class="text-s text-14" @click.stop.prevent="editFn(item)">编辑</span>
					<span class="text-red text-14" @click.stop.prevent="deleteFn(item)">删除</span>
				</div>
				<i class="el-icon-arrow-right"></i>
			</li>
		</ul>
		<el-dialog title="新建一级分类" :visible.sync="centerDialogVisible" width="30%" center>
			<el-row class="p-all-20 ">
				<el-col :span="20" class="box-flex m-b-10">
					<el-input placeholder="请输入一级品类名称" v-model="leaveName" />
				</el-col>

			</el-row>
			<span slot="footer" class="dialog-footer">
				<el-button @click="centerDialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="saveAdmin">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>
<script>
	import {
		SUCCESS_REQUEST_STATUS
	} from '@/utils/config.js'
	export default {
		props: {
			leveFirstList: {
				type: Array,
				default: []
			}
		},
		data() {
			return {
				list: [],
				catId: '',
				keyWord: '',
				currentIndex: 0,
				leaveName: '',
				centerDialogVisible: false
			}
		},
		methods: {
			selectItem(item, index) {
				this.currentIndex = index
				this.$emit('selectFirstItem', item.catId)
			},
			addCartFn() {
				this.catId = ''
				this.centerDialogVisible = true
			},
			editFn(item) {
				this.leaveName = item.catName
				this.catId = item.catId
				this.centerDialogVisible = true
			},
			deleteFn(item) {
				this.$confirm("删除一级品类?", "确定删除此品类", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning"
				}).then(() => {
					this.$ajax({
						api: 'category/delete',
						params: {
							catId: item.catId
						}
					}).then(res => {
						if (res.status === SUCCESS_REQUEST_STATUS) {
							this.$emit('addFLeave')
							this.$message({
								type: 'success',
								message: '删除成功'
							})
						}
					}).catch(err => {
						this.$message({
							type: 'error',
							message: err.message
						})
					})
				})
			},
			saveAdmin() {
				this.$ajax({
					api: 'category/add',
					params: {
						catId: this.catId,
						parentId: '',
						catName: this.leaveName,
						levelNum: 1
					}
				}).then(res => {
					if (res.status === SUCCESS_REQUEST_STATUS) {
						this.$emit('addFLeave')
						this.$message({
							type: 'success',
							message: '操作成功'
						})
						this.centerDialogVisible = false
					}
				}).catch(err => {
					this.$message({
						type: 'error',
						message: err.message
					})
				})
			}
		},
		created() {
			this.list = this.leveFirstList
		},
		watch: {
			leveFirstList(val) {
				this.list = val
			},
			keyWord(val) {
				this.$emit('searchFirst', val)
			}
		}
	}
</script>
